<template>
	<view>
		<view style="height: 100upx;background-color: #fff;line-height: 100upx;margin-top: 10upx;display: flex;">
			<text style="margin: 0upx 0 0upx 30upx;flex: 1;">银行</text>
			<input style="margin-top: 30upx;font-size: 28upx;color: #262464;flex: 4;" type="text" disabled="true" value="建设银行"/>
		</view>
		<view style="height: 100upx;background-color: #fff;line-height: 100upx;margin-top: 10upx;display: flex;">
			<text style="margin: 0upx 0 0upx 30upx;flex: 1;">开户行</text>
			<input style="margin-top: 30upx;font-size: 28upx;color: #262464;flex: 4;" type="text" v-model="open_bank" placeholder="请输入开户行名称"/>
		</view>
		<view style="height: 100upx;background-color: #fff;line-height: 100upx;margin-top: 10upx;display: flex;">
			<text style="margin: 0upx 0 0upx 30upx;flex: 1;">银行卡号</text>
			<input style="margin-top: 30upx;font-size: 28upx;color: #262464;flex: 4;" type="text" v-model="bankNo" placeholder="请填写银行卡号"/>
		</view>
		<!-- <view style="height: 100upx;background-color: #fff;line-height: 100upx;margin-top: 30upx;display: flex;">
			<text style="margin: 0upx 0 0upx 30upx;">所属银行</text>
			<input style="margin-top: 30upx;font-size: 28upx;color: #262464;" type="text" v-model="bank_id" placeholder="请填写所属银行信息"/>
		</view> -->
		
		<view style="margin-top: 30upx;text-align: center;">
			<view style="height: 370upx;background-color: #fff;border-top: 1upx solid #F8F8F8;">
				<view style="line-height: 100upx;margin: 0upx 130upx 0upx 30upx;">
					上传身份证照片 (需上传清晰,完整,工整的照片)
				</view>
				<view style="display: flex;justify-content: space-between;">
					<view @click="chooseImage">
						<image style="height: 200upx; width: 355upx;" :src=" avatar || '../../../static/xiangji01.png'" mode=""></image>
						<text>身份证正面</text>
					</view>
					<view @click="chooseImage1">
						<image style="height: 200upx; width: 355upx;" :src=" avatar1 || '../../../static/xiangji02.png'" mode=""></image>
						<text>身份证反面</text>
					</view>
				</view>
			</view>
			<view class="" style="height: 100upx;background-color: #fff;display: flex;border-top: 1upx solid #F8F8F8;">
				<view class="" style="line-height: 100upx;margin: 0upx 90upx 0upx 30upx;">
					持卡人姓名
				</view>
				<input style="margin-top: 30upx;font-size: 28upx;" type="text" v-model="name" placeholder="请输入持卡人姓名" />
			</view>
			<view class="" style="height: 100upx;background-color: #fff;display: flex;border-top: 1upx solid #F8F8F8;">
				<view class="" style="line-height: 100upx;margin: 0upx 60upx 0upx 30upx;">
					持卡人身份证号
				</view>
				<input style="margin-top: 30upx;font-size: 28upx;" type="text" v-model="idCard" placeholder="请输入持卡人身份证号" />
			</view>
			<!-- <view class="" style="height: 100upx;background-color: #fff;display: flex;border-top: 1upx solid #F8F8F8;">
				<view class="" style="line-height: 100upx;margin: 0upx 43upx 0upx 30upx;">
					持卡人身份证
				</view>
				<input style="margin-top: 30upx;font-size: 28upx;" type="text" value="" placeholder="请输入持卡人身份证地址" />
			</view> -->
			
		</view>
		<view class="">
			<button v-if="id" style="width: 90%;margin: 0 5%;background-color: #CFCFCF;border-radius: 50upx;line-height: 70upx; height: 70upx;color: #fff;position: fixed;bottom: 130upx;" type="default" @click="del">删除账户信息</button>
			<button v-if="id" style="width: 90%;margin: 0 5%;background-color: #CFCFCF;border-radius: 50upx;line-height: 70upx; height: 70upx;color: #fff;position: fixed;bottom: 30upx;" type="default" @click="modify">确认修改</button>
			<button v-else style="width: 90%;margin: 0 5%;background-color: #CFCFCF;border-radius: 50upx;line-height: 70upx; height: 70upx;color: #fff;position: fixed;bottom: 30upx;" type="default" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				res:[],
				user_id:'',
				bank_id:'', // 所属银行3
				open_bank:'',
				bankNo:'',
				avatar:'',
				avatar1:'',
				name:'',
				idCard:'',
				id: '',
				bankcard_list:{},
			};
		},
		onLoad:function(e){
			if (e.bankid != 'undefined' && e.bankid != undefined) {
				this.id = e.bankid
				uni.setNavigationBarTitle({
					title: '编辑银行卡信息'
				});
			}
			uni.showLoading()
			uni.getStorage({
				key: 'user_id',
				success: (res) => {
					this.user_id = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../index/index'
					});
				}
			});
		},
		methods:{
			setAjax(){
				var o = this
				// 银行卡列表
				if(this.id) { // 编辑删除操作用的
					uni.request({
					 url: 'https://cx.mingmeijt.com/Api/UserBank/index',
					 method: 'POST',
					 header:{'Content-Type':'application/x-www-form-urlencoded'},
					 data:{
					  user_id: this.user_id,
					 },
					 success: res => {
						 let bankcard_list = res.data.data
						 let arr = bankcard_list.filter(function(item){
						  return(item.id == o.id)
						 })
						 this.bankcard_list = arr[0]
						 this.idCard = this.bankcard_list.idCard
						 this.name = this.bankcard_list.name
						 this.open_bank = this.bankcard_list.open_bank
						 this.bankNo = this.bankcard_list.bankNo
					 },
					 fail: () => {},
					 complete: () => {}
					});
				}
				
				// 银行信息列表
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/Bank/index',
					method: 'POST',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					data:{
					},
					success: res => {
						this.bank_id = res.data.data[0].id
						// console.log(res.data.data[0].id)
					},
					fail: () => {},
					complete: () => {}
				});
				
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/Bank/index',
					method: 'POST',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					data:{
					},
					success: res => {
						this.bank_id = res.data.data[0].id
						// console.log(res.data.data[0].id)
					},
					fail: () => {},
					complete: () => {}
				});
				uni.hideLoading()
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
			del(){
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/UserBank/deleteUserBank',
					method: 'POST',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					data:{
						id: this.id,
						user_id: this.user_id,
					},
					success: res => {
						uni.showToast({
							title: res.data.msg
						})
						if(res.data.code == 200) {
							setTimeout(function() {
								uni.reLaunch({
									url: './qianbao'
								})
							}, 1500);
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 修改银行信息
			modify() {
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/UserBank/updateUserBank',
					method: 'POST',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					data:{
						id: this.id,
						user_id: this.user_id,
						bank_id: this.bank_id,
						open_bank: this.open_bank,
						bankNo: this.bankNo,
						name: this.name,
						idCard: this.idCard,
					},
					success: res => {
						// console.log(res)
						uni.showToast({
							title: res.data.msg
						})
						if(res.data.code == 200) {
							setTimeout(function() {
								uni.reLaunch({
									url: './qianbao'
								})
							}, 1500);
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			submit () {
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/UserBank/addUserBank',
					method: 'POST',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					data:{
						user_id: this.user_id,
						bank_id: this.bank_id,
						open_bank: this.open_bank,
						bankNo: this.bankNo,
						name: this.name,
						idCard: this.idCard,
					},
					success: res => {
						// console.log(res)
						uni.showToast({
							title: res.data.msg
						})
						if(res.data.code == 200) {
							setTimeout(function() {
								uni.reLaunch({
									url: './qianbao'
								})
							}, 1500);
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			chooseImage(){
				var _this = this
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
							let file = res.tempFilePaths
							var images = []
							var img = ''
							// console.log(file)
							for(var i = 0; i<res.tempFilePaths.length; i++) {
								uni.uploadFile({
									url: 'https://cx.mingmeijt.com/Api/Upload/index',
									//仅为示例，非真实的接口地址
									filePath: file[i],
									name: 'file',
									formData: {
										'user': 'test'
									},
									success: (res) => {
										// console.log(res)
										images.push(JSON.parse(res.data).data)
										_this.imagess = images
										_this.avatar = 'https://cx.mingmeijt.com'+ _this.imagess[0]
										// console.log(_this.avatar)
										
										img = img + JSON.parse(res.data).url + ';'
										_this.imgurl = img
									}
								});
							}
				    }
				});
			},
			chooseImage1(){
				var _this = this
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
							let file = res.tempFilePaths
							var images = []
							var img = ''
							// console.log(file)
							for(var i = 0; i<res.tempFilePaths.length; i++) {
								uni.uploadFile({
									url: 'https://cx.mingmeijt.com/Api/Upload/index',
									//仅为示例，非真实的接口地址
									filePath: file[i],
									name: 'file',
									formData: {
										'user': 'test'
									},
									success: (res) => {
										// console.log(res)
										images.push(JSON.parse(res.data).data)
										_this.imagess = images
										_this.avatar1 = 'https://cx.mingmeijt.com'+ _this.imagess[0]
										// console.log(_this.avatar1)
										
										img = img + JSON.parse(res.data).url + ';'
										_this.imgurl = img
									}
								});
							}
				    }
				});
			},
		}
	}
</script>

<style>
	page{background-color: #F8F8F8;}
</style>
